<template>
    <div>
        <div class="topbox">
            <el-button icon="el-icon-refresh" @click="()=>{getList()}">刷新列表</el-button>
            <el-form :model="tuisongSearch" :inline="true" ref="ts" @submit.native.prevent>
                <el-form-item label="" prop="title">
                    <el-input type="text" v-model="tuisongSearch.title" placeholder="请输入标题"></el-input>
                </el-form-item>
                <el-form-item label="" prop="content">
                    <el-input type="text" v-model="tuisongSearch.content" placeholder="请输入推送内容"></el-input>
                </el-form-item>
                <el-button type="primary" class="ml_10" @click="()=>{getList()}" native-type="submit">搜索</el-button>
                <el-button @click="resetForm('ts')">重置</el-button>
            </el-form>
        </div>
        <el-table ref="tables" v-loading="tableload" :data="tuisongxiaoxiList" row-key="id" style="width:100%" default-expand-all stripe border>
            <el-table-column label="id" prop="id"></el-table-column>
            <el-table-column label="消息标题" prop="title"></el-table-column>
            <el-table-column label="消息类型" prop="category"></el-table-column>
            <el-table-column label="发送用户" prop="scope"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="text" size="mini" @click="()=>{detail(scope.row, 1)}">查看</el-button>
                    <el-button type="text" size="mini" @click="()=>{edit(scope.row)}">修改</el-button>
                    <el-button type="text" size="mini" @click="()=>{detail(scope.row, 0)}">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            background
            layout="prev, pager, next, jumper"
            :total="listLen"
            :page-size="limit"
            @current-change="toPage"
            :current-page.sync="currentPage"
            class="txt_r mt_20"
        ></el-pagination>
        <!-- 查看表单 -->
        <el-dialog title="用户信息" :visible.sync="showDetail" :close-on-click-modal="false">
            <table class="detail">
                <tr><td class="txt_r">标题：</td><td>{{detailData.title}}</td></tr>
                <tr><td class="txt_r">消息类型：</td><td>{{detailData.category}}</td></tr>
                <tr><td class="txt_r">发送用户：</td><td>{{detailData.scope}}</td></tr>
                <tr><td class="txt_r">时间：</td><td>{{detailData.create_time}}</td></tr>
                <tr><td class="txt_r">更新时间：</td><td>{{detailData.update_time}}</td></tr>
                <tr>
                    <td class="txt_r">消息内容：</td>
                    <td>
                        <div class="cont ql-editor mt_20" v-html="detailData.content"></div>
                    </td>
                </tr>
            </table>
        </el-dialog>
        <!-- 修改推送消息 -->
        <el-dialog title="推送消息" :visible.sync="showEditTuisong" width="85%">
            <el-form
                :model="tuisongEditForm"
                label-position="right"
                :rules="formRules"
                ref="tuisongEditForm"
                label-width="80px"
            >
                <el-form-item label="标题" prop="title">
                    <el-input type="text" v-model="tuisongEditForm.title" placeholder="请输入文章标题"></el-input>
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-radio v-model="tuisongEditForm.status" label="1">正常</el-radio>
                    <el-radio v-model="tuisongEditForm.status" label="0">删除</el-radio>
                </el-form-item>
                <el-form-item label="选择用户" prop="selectStr">
                    <el-radio-group v-model="tuisongEditForm.selectStr">
                        <el-radio label="1" @click.native.prevent='chooseUserRadio(1)'>选择全部用户</el-radio>
                        <el-radio label="2" @click.native.prevent='chooseUserRadio(2)'>选择部分用户</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="内容" prop="content">
                    <div class="quill_pb">
                        <vue-ueditor-wrap v-model="tuisongEditForm.content" :config="ueConfig"></vue-ueditor-wrap>
                    </div>
                    <el-upload
                        class="dn"
                        :action="BASE_URL+'/admin/file/upload/createfile'"
                        name="file"
                        :before-upload="upimgBefore"
                        :on-success="upimgSuccess"
                        :on-error="upimgError"
                        >
                        <el-button size="small" type="primary" ref="btn">点击上传</el-button>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="showEditTuisong = false">取 消</el-button>
                <el-button type="primary" @click="addEditTuisong">修 改</el-button>
            </div>
        </el-dialog>
        <!-- 选择用户 -->
        <el-dialog title="选择用户" :visible.sync="showChooseUser" width="85%">
            <el-table ref="tables" v-loading="tableload" :data="listAllData" style="width:100%" default-expand-all stripe border
              :row-key="getRowkeys"
              @selection-change="handleSelectionChange"
              >
                <el-table-column type="selection" :reserve-selection="true" width="55"> </el-table-column>
                <el-table-column label="账号" prop="account"></el-table-column>
                <el-table-column label="名称" prop="nickname"></el-table-column>
                <el-table-column label="类型" prop="type_value"></el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button @click="showChooseUser = false">取 消</el-button>
                <el-button type="primary" @click="quedingUser">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { BASE_URL } from "../../../config/app";
import * as apis from "../../../api/user/user";
import VueUeditorWrap from 'vue-ueditor-wrap';

export default {
    data() {
        return {
            BASE_URL: '',
            tableload: false,
            listLen: 0,
            limit: 15,
            currentPage: 1,
            tuisongxiaoxiList: [],
            tuisongSearch: {
                title: '',
                content: ''
            },
            detailData: {},
            showDetail: false,
            // 修改推送消息
            showEditTuisong: false,
            tuisongEditForm: {
                id: '',
                title: '',
                status: '',
                selectStr: '',
                content: ''
            },
            formRules: {
                title: [{required: true,message: "请输入标题",trigger: "blur"}],
                content: [{required: true,message: "请输入文章内容",trigger: "blur"}],
            },
            selectStr: '',
            showChooseUser: false,
            listAllData: [],
            getRowkeys (row) {
                return row.id
            },
            radio: '',
            // 百度编辑器
            ueConfig: {
                // 初始容器高度
                initialFrameHeight: 300,
                // 初始容器宽度
                initialFrameWidth: '100%',
                // 上传文件接口
                elementPathEnable: false,
                wordCount: false,
                UEDITOR_HOME_URL: '/UEditor/',
                imageActionName: 'uploadimage', //执行上传图片的action名称,
                imageFieldName: "file", //提交的图片表单名称
                imageAllowFiles: [".png", ".jpg", ".jpeg", ".gif", ".bmp"],
                "fileActionName": "uploadfile",
                "fileFieldName": "file",
                "fileAllowFiles": [
                    ".png", ".jpg", ".jpeg", ".gif", ".bmp",
                    ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
                    ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid",
                    ".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",
                    ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"
                ],
            },
        }
    },
    created(){
        this.BASE_URL = BASE_URL;
        this.getList();
    },
    methods: {
        getList(page=1){
            apis.getTuisong({
                title: this.tuisongSearch.title,
                content: this.tuisongSearch.content,
                page: page,
                per_page: this.limit
            }).then((data) => {
                this.tableload = false;
                if(data.code){
                    this.$message.error(data.message);
                    return;
                }
                this.listLen = Number(data.data.total);
                this.limit = Number(data.data.per_page);
                this.tuisongxiaoxiList = data.data.data;
            }).catch(()=>{
                this.tableload = false;
                this.$message({type: "error",message: "请求失败",duration: 1800});
            });
        },
        detail(row, num){
            if(num == 1){
                this.detailData = row;
                this.showDetail = true;
            }
            if(num == 0){ // 删除
                this.$confirm("确定删除该用户吗", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then((response)=>{
                    apis.del({id: row.id}).then((data)=>{
                        if(data.code){
                            this.$message.error(data.message);
                            return;
                        }
                        this.$message.success("删除成功");
                        this.getList();
                    }).catch(()=>{
                        this.$message.error("删除失败");
                    })
                }).catch(()=>{
                    this.$message.info("取消删除");
                });
            }
        },
        edit(row){
            this.tuisongEditForm.id = row.id;
            this.tuisongEditForm.title = row.title;
            this.tuisongEditForm.content = row.content;
            if(row.status == '正常'){
                this.tuisongEditForm.status = '1';
            }else{
                this.tuisongEditForm.status = '0';
            }
            if(row.scope == "all"){
                this.selectStr = 'all';
                this.tuisongEditForm.selectStr = '1';
            }else{
                this.tuisongEditForm.selectStr = '2';
            }
            this.showEditTuisong = true;
        },
        resetForm(name){
            this.$refs[name].resetFields();
        },
        toPage(val){
            this.currentPage = val;
            this.getList(val);
        },
        // 修改
        // 选择用户按钮改变
        chooseUserRadio(e){
            if(e == 1){
                this.tuisongEditForm.selectStr = '1';
                this.selectStr = 'all';
            }else if(e == 2){
                this.showChooseUser = true;
                this.tuisongEditForm.selectStr = '2';
                this.getAllList();
            }
        },
        quedingUser(){
            this.showChooseUser = false;
        },
        getAllList(){
            apis.getList({
                ...this.search,
                page: 1,
                per_page: this.listLen
            }).then((data)=>{
                this.tableload = false;
                if(data.code){
                    this.$message.error(data.message);
                    return;
                }
                this.listAllData = data.data.data;
            }).catch(()=>{
                this.tableload = false;
                this.$message({type: "error",message: "请求失败",duration: 1800});
            });
        },
        // 全选与全不选
        handleSelectionChange(val) {
            let multipleSelectionAll = val;
            if(multipleSelectionAll.length == this.listLen){
                this.selectStr = 'all';
            }else{
                let selected = [];
                for(var i = 0; i < multipleSelectionAll.length; i++){
                    selected.push(multipleSelectionAll[i].id);
                }
                this.selectStr = selected.join(',')
            }
        },
        // 插入图片
        upimgBefore(){ this.upimgLoding = true; },
        upimgSuccess(data){
            this.upimgLoding = false;
            let quill = this.$refs.myQuillEditor.quill;
            if (data.code) {this.$message.error('图片插入失败');return false;}
            let length = quill.getSelection().index; // 获取光标所在位置
            quill.insertEmbed(length, 'image', BASE_URL + "/" + data.data.key); // 插入图片
            quill.setSelection(length + 1); // 调整光标
        },
        upimgError(){
            this.upimgLoding = false;
            this.$message.error('图片插入失败');
        },
        addEditTuisong(){
            this.$refs['tuisongEditForm'].validate((valid) => {
                if (!valid) {return false;}
                apis.nodifyinfo({
                    id: this.tuisongEditForm.id,
                    title: this.tuisongEditForm.title,
                    content: this.tuisongEditForm.content,
                    status: this.tuisongEditForm.status,
                    scope: this.selectStr
                }).then((data)=>{
                    this.showEditTuisong = false;
                    if(data.code){
                        this.$message.error(data.message);
                        return;
                    }
                    this.$message.success("修改成功");
                    this.tuisongEditForm.title = '';
                    this.tuisongEditForm.content = '';
                    this.getList(1);
                }).catch(()=>{
                    this.showEditTuisong = false;
                    this.$message({type: "error",message: "请求失败",duration: 1800});
                });
            })
        }
    },
    components: {
        VueUeditorWrap
    }
}
</script>

<style>
.topbox {margin-bottom: 20px;}
.topbox{display:flex; align-items:center; justify-content: space-between;}
.topbox .el-form-item{margin-bottom:0;}

.txt_r {text-align: right;}
.detail{font-size:16px; }
.detail td{padding:10px; vertical-align: middle;}
</style>
